<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head>
    <base href="<%=basePath%>" />
    <title>Building Heat Consumption Analyse</title>
    <script type="text/javascript">
		var path = "<%=basePath%>";
	</script>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
	<meta http-equiv="description" content="This is my page" />
	<link rel="stylesheet" type="text/css" href="<%=basePath%>beshs/css/content.css" />
	<script type="text/javascript" src="<%=basePath%>resources/jquery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>resources/datepicker/datepicker.js"></script>
	<!-- 页面特效 -->
	<jsp:include page="/beshs/res-refer/page-effect-reference.jsp" />
	<!-- 系统通用资源 -->
	<jsp:include page="/resources/resource-refer/common-resource-reference.jsp" />
	<!-- 用户访问菜单路径 -->
	<jsp:include page="/resources/usertrace/common-uservisit-reference.jsp" />
	<!-- EasyUI进度条资源 -->
	<jsp:include page="/resources/resource-refer/component-easyui-reference.jsp" />
	<!-- iframe高度自适应 -->
	<script type="text/javascript">
        function getOsName() { 
    		var OsObject = ""; 
		   	if(navigator.userAgent.indexOf("MSIE")>0) { 
		    	return "MSIE"; 
		   	} 
		   	if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
		        return "Firefox"; 
		   	} 
		   	if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
		        return "Safari"; 
		   	}  
		  	if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
		        return "Camino"; 
		   	} 
		   	if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 
		        return "Gecko"; 
		   	} 
		} 
        
        /** 根据浏览器类型选择iframe自适应方式 **/
        function setIframeHeightAutosize() {
        	//获取Iframe对象 ie和firefox都可以获得
        	var lcpIframe = document.getElementById("lineChartPage"); 
        	var ccpIframe = document.getElementById("columnChartPage");
        	try{
                if(getOsName() == 'MSIE'){
                	//线性图
                    var lbHeight = lcpIframe.document.body.scrollHeight; //IE
                    if(lbHeight<=400){
                    	lbHeight = 400;
                        }
                    lcpIframe.style.height =  lbHeight + "px";
                    //柱状图
                    var cbHeight = ccpIframe.document.body.scrollHeight; //IE
                    if(cbHeight<=400){
                    	cbHeight = 400;
                        }
                    ccpIframe.style.height =  cbHeight + "px"; 
                }else if(getOsName() == 'Firefox'){
                	//线性图
                    var lfHeight = lcpIframe.contentDocument.body.scrollHeight; //FireFox 
                   	 if(lfHeight<=400){
                    	lfHeight = 400;
                        }
                    lcpIframe.height = lfHeight + "px";
                    //柱状图
                    var cfHeight = ccpIframe.contentDocument.body.scrollHeight; //FireFox 
	               	 if(cfHeight<=400){
	               		cfHeight = 400;
	                    }
                    ccpIframe.height = cfHeight + "px";
                } else {
                	//线性图
                    lcpIframe.style.height = 400 + "px";
                    //柱状图
                    ccpIframe.style.height = 400 + "px";
                }          
            } catch (ex){}
		}
		
		$(function() {
			setIframeHeightAutosize();
		})
    </script>
  </head>
  <body>
  	<div class="content_all">
  		<!--导航条-->
  		<div class="insertinfo_table">
		  	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		    	<tr>
		        	<th>Building Range：</th>
		          	<td>
		          		<script type="text/javascript">
		          			$(function() {
		          				//楼栋区域
		          				$(".building_area1").hide("fast");
			          			$(".building_area2").hide("fast");
			          			//时间范围
			          			$(".time_period1").hide("fast");
			          			$(".time_period2").hide("fast");
		          				$("select[name='buildingArea']").change(function() {
		          					var buildingArea = $("select[name='buildingArea']").val();
			          				if(buildingArea == 1) { //小区楼栋
			          					//楼栋区域
			          					$(".building_area1").show("fast");
			          					$(".building_area2").hide("fast");
			          					//时间范围
			          					$(".time_period1").show("fast");
			          					$(".time_period2").hide("fast");
			          				} else if(buildingArea == 2) { //单一楼栋
			          					//楼栋区域
			          					$(".building_area1").show("fast");
			          					$(".building_area2").show("fast");
			          					//时间范围
			          					$(".time_period1").hide("fast");
			          					$(".time_period2").show("fast");
			          				} else {
			          					//楼栋区域
			          					$(".building_area1").hide("fast");
			          					$(".building_area2").hide("fast");
			          					//时间范围
			          					$(".time_period1").hide("fast");
			          					$(".time_period2").hide("fast");
			          				}
		          				});
		          			});
		          		</script>
						<s:select name="buildingArea" list="#{1:'District', 2:'Single'}" headerKey="" headerValue="Please select" cssClass="s_sel"></s:select>
					</td>
					<th class="building_area1">Project：</th>
			       	<td class="building_area1">
			       		<s:select name="projectUID" list="projectList" listKey="id" listValue="projectName" headerKey="" headerValue="Please select" cssClass="s_sel"></s:select>
			       	</td>
	      			<th class="building_area1">District：</th>
	      			<td class="building_area1">
	      				<script type="text/javascript">
	      					function reloadCommunitys(projectUID, communityUID) {
	      						$("select[name='communityUID']").children("option").slice(1).remove();
	      						if(projectUID!=null && projectUID!="") {
	      							$.getJSON(path+"beshs/communityActionJson!queryCommunitysByBelongs.do?date="+new Date(), {
	      								projectUID: projectUID
	      							}, function(data){
	      								for(var index=0; index<data.length; index++) {
	      									if(communityUID!=null && communityUID!="" && communityUID==data[index].id) {
		        								$("select[name='communityUID']").append("<option value='"+data[index].id+"' selected='selected'>"+data[index].communityName+"</option>");
		        							} else {
		        								$("select[name='communityUID']").append("<option value='"+data[index].id+"'>"+data[index].communityName+"</option>");
		        							}
	      								}
	      							});
	      						}
	      					}
	      					
	      					$(function() {
	      						$("select[name='projectUID']").change(function(){
			        				var projectUID = $(this).val();
			        				var communityUID = $("select[name='communityUID']");
			        				reloadCommunitys(projectUID, communityUID);
			        			});
	      					});
	      				</script>
	      				<s:select name="communityUID" list="communityList" listKey="id" listValue="communityName" headerKey="" headerValue="Please select" cssClass="s_sel"></s:select>
	      			</td>
	        		<th class="building_area2">Building：</th>
			       	<td class="building_area2">
			       		<script type="text/javascript">
				       		function reloadBuildings(projectUID, communityUID, buildingUID) {
			        			$("select[name='buildingUID']").children("option").slice(1).remove();
			        			$.getJSON(path+"beshs/buildingActionJson!queryBuildingsByBelongs.do?date="+new Date(), {
			        				projectUID: projectUID,
			        				communityUID: communityUID
			        			}, function(data) {
			        				for(var index=0; index<data.length; index++) {
			        					if(buildingUID!=null && buildingUID!="" && buildingUID==data[index].id) {
	        								$("select[name='buildingUID']").append("<option value='"+data[index].id+"' selected='selected'>"+data[index].buildingName+"</option>");
	        							} else {
	        								$("select[name='buildingUID']").append("<option value='"+data[index].id+"'>"+data[index].buildingName+"</option>");
	        							}
			        				}
			        			});
			        		}
			        		
			        		$(function(){
			        			$("select[name='projectUID']").change(function(){
			        				var projectUID = $(this).val();
			        				var communityUID = $("select[name='communityUID']").val();
			        				var buildingUID = $("select[name='buildingUID']").val();
			        				reloadBuildings(projectUID, communityUID, buildingUID);
			        			});
			        			
			        			$("select[name='communityUID']").change(function(){
			        				var communityUID = $(this).val();
			        				var projectUID = $("select[name='projectUID']").val();
			        				var buildingUID = $("select[name='buildingUID']").val();
			        				reloadBuildings(projectUID, communityUID, buildingUID);
			        			});
			        		});
			       		</script>
			       		<s:select name="buildingUID" list="buildingList" listKey="id" listValue="buildingName" headerKey="" headerValue="Please select" cssClass="s_sel"></s:select>
			       	</td>
		        </tr>
		        <tr class="time_period1">
		        	<th>Period Range：</th>
		          	<td colspan="5">
		          	<input id="measure_startDate1" name="startDate1" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" />
		          	
<!-- 		          		<input name="startDate1" id="measure_startDate1" type="text" class="s_input" onclick="selectDate(this,'yyyy-MM-dd')" readonly/> -->
<%--           				<img src="<%=basePath%>resources/datepicker/calendar.jpg" onclick="txtSelectDate('measure_startDate1','yyyy-MM-dd')"/> --%>
          				&nbsp;<font style="font-weight: inherit;font-style: italic;">To</font>&nbsp;
          				<input id="measure_endDate1" name="endDate1" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" />
          				
<!--           				<input name="endDate1" id="measure_endDate1" type="text" class="s_input" onclick="selectDate(this,'yyyy-MM-dd')" readonly/> -->
<%--           				<img src="<%=basePath%>resources/datepicker/calendar.jpg" onclick="txtSelectDate('measure_endDate1','yyyy-MM-dd')"/> --%>
          				&nbsp;&nbsp;<input name="submit1" type="button" value="Submit" class="s_btn" />
		          	</td>
		        </tr>
		        <tr class="time_period2">
		        	<th>Period Range：</th>
		          	<td colspan="3">
		          	<input id="measure_startDate2" name="startDate2" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" />
		          	
<!-- 		          		<input name="startDate2" id="measure_startDate2" type="text" class="s_input" onclick="selectDate(this,'yyyy-MM-dd')" readonly/> -->
<%--           				<img src="<%=basePath%>resources/datepicker/calendar.jpg" onclick="txtSelectDate('measure_startDate2','yyyy-MM-dd')"/> --%>
          				&nbsp;<font style="font-weight: inherit;font-style: italic;">To</font>&nbsp;
          				<input id="measure_endDate2" name="installDaendDate2te" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" />
          				
<!--           				<input name="endDate2" id="measure_endDate2" type="text" class="s_input" onclick="selectDate(this,'yyyy-MM-dd')" readonly/> -->
<%--           				<img src="<%=basePath%>resources/datepicker/calendar.jpg" onclick="txtSelectDate('measure_endDate2','yyyy-MM-dd')"/> --%>
		          	</td>
		          	<th>Statistic Frequence：</th>
		          	<td colspan="3">
		          		<input type="radio" name="timeFrequence" value="permonth" checked="checked" /><span>Monthly Statistics</span>
		          		<input type="radio" name="timeFrequence" value="peryear" /><span>Annual Statistics</span>
						&nbsp;&nbsp;<input name="submit2" type="button" value="Submit" class="s_btn" />
		          	</td>
		        </tr>
		    </table>
		</div>
	</div>
	<div class="clear"></div>
	<script type="text/javascript">
		function verifyBuildingStatis(buildingArea) {
  			if(buildingArea == 1) {
  				//楼栋范围校验
  				var communityUID = $("select[name='communityUID']").val();
  				if(communityUID == "") {
  					Dialog.alert("Please select project、district！", function() {
				  		$("select[name='communityUID']").focus();
				  	});
				  	return false;	
  				}
  				//时段范围校验
  				var startDate = $("input[name='startDate1']").val();
  				var endDate = $("input[name='endDate1']").val();
  				if(startDate == "") {
  					Dialog.alert("Please enter start date！", function() {
				  		$("input[name='startDate1']").focus();
					});
				  	return false;	
  				}
  				if(endDate == "") {
  					Dialog.alert("Please enter end date！", function() {
				  		$("input[name='endDate1']").focus();
				  	});
				  	return false;	
  				}
  				if(startDate >= endDate) {
  					Dialog.alert("Please confirm end date before start date！", function() {
				  		$("input[name='endDate1']").focus();
				  	});
				  	return false;	
  				}
  			}
  			if(buildingArea == 2) {
  				//楼栋范围校验
  				var buildingUID = $("select[name='buildingUID']").val();
  				if(buildingUID == "") {
  					Dialog.alert("Please select project、building information！", function() {
				  		$("select[name='buildingUID']").focus();
				  	});
				  	return false;
  				}
  				//时段范围校验
  				var startDate = $("input[name='startDate2']").val();
  				var endDate = $("input[name='endDate2']").val();
  				if(startDate == "") {
  					Dialog.alert("Please enter start date！", function() {
				  		$("input[name='startDate2']").focus();
				  	});
					return false;	
  				}
  				if(endDate == "") {
  					Dialog.alert("Please enter end date！", function() {
				  		$("input[name='endDate2']").focus();
				  	});
				  	return false;	
  				}
  				if(startDate >= endDate) {
  					Dialog.alert("Please confirm end date before start date！", function() {
				  		$("input[name='endDate2']").focus();
				  	});
				  	return false;	
  				}
  			}
  			return true;
  		}
  		
  		//小区楼栋耗热分析
  		$("input[name='submit1']").click(function() {
  			var statisVerify = verifyBuildingStatis(1);
  			if(statisVerify) {
  				$.messager.progress({
					title: "Please waiting",
					msg: "Data loading,please wait..."
				});
				setTimeout(function(){
					$.messager.progress("close");
				}, 3000);
  				//楼栋范围
  				var communityUID = $("select[name='communityUID']").val();
  				//时段范围
  				var startDate = $("input[name='startDate1']").val();
  				var endDate = $("input[name='endDate1']").val();
  				//线性图
  				window.frames["lineChartPage"].location = path + "beshs/buildingConsumeStatisAction!queryCommunityAreaStatisChart.do?date="+new Date()
  						+ "&communityUID=" + communityUID
  						+ "&startDate=" + startDate
  						+ "&endDate=" + endDate
  						+ "&chartType=line";
  				//柱状图
  				window.frames["columnChartPage"].location = path + "beshs/buildingConsumeStatisAction!queryCommunityAreaStatisChart.do?date="+new Date()
  						+ "&communityUID=" + communityUID
  						+ "&startDate=" + startDate
  						+ "&endDate=" + endDate
  						+ "&chartType=column";
  			}
  		});
  		
  		//单一楼栋耗热分析
  		$("input[name='submit2']").click(function() {
  			var statisVerify = verifyBuildingStatis(2);
  			if(statisVerify) {
  				$.messager.progress({
					title: "Please waiting",
					msg: "Data loading,please wait..."
				});
				setTimeout(function(){
					$.messager.progress("close");
				}, 3000);
  				//楼栋范围
  				var buildingUID = $("select[name='buildingUID']").val();
  				//时段范围
  				var startDate = $("input[name='startDate2']").val();
  				var endDate = $("input[name='endDate2']").val();
  				//统计频率
  				var timeFrequence = $("input[name='timeFrequence']:checked").val();
  				//线性图
  				window.frames["lineChartPage"].location = path + "beshs/buildingConsumeStatisAction!queryBuildingAreaStatisChart.do?date="+new Date()
  						+ "&buildingUID=" + buildingUID
  						+ "&startDate=" + startDate
  						+ "&endDate=" + endDate
  						+ "&timeFrequence=" + timeFrequence
  						+ "&chartType=line";
  				//柱状图
  				window.frames["columnChartPage"].location = path + "beshs/buildingConsumeStatisAction!queryBuildingAreaStatisChart.do?date="+new Date()
  						+ "&buildingUID=" + buildingUID
  						+ "&startDate=" + startDate
  						+ "&endDate=" + endDate
  						+ "&timeFrequence=" + timeFrequence
  						+ "&chartType=column";
  			}
  		});
	</script>
	<div class="content_all">
		<!--查询列表-->
  		<ul class="nav_menu"><!--选项卡开始-->
    		<li class="selected"><span>Linear Graph</span></li>
    		<li><span>Bar Graph</span></li>
  		</ul>
  		<div class="nav_content">
   	 		<div class="ct">
   	 			<iframe frameborder="0" name="lineChartPage" scrolling="auto" id="lineChartPage" src="" height="90%" width="100%" ></iframe>
   	 		</div>
    		<div class="ct">
    			<iframe frameborder="0" name="columnChartPage" scrolling="auto" id="columnChartPage" src="" height="90%" width="100%"></iframe>
    		</div>
  		</div><!--选项卡结束-->
	</div>
  </body>
</html>
